<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading" :style="{ 'marginTop': header.init.height + 'px' }">
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title" :color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor" :splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity" :transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio" :isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed" :backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
				<view class="tui-header-icon" :style="{ top: header.init.top + 'px' }">
					<tui-icon name="arrowleft" :color="tui.getColorSite().title.color" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<view class="orderInfo">
				<view class="tui-order-header">
					<view class="tui-header-content">
						<view>
							<view class="tui-status-text" v-if="info.statusText">{{ info.statusText }}</view>
							<view v-if="info.statusText=='待收货'" class="statustext">您的快递正在飞奔向您，请耐心等待</view>
						</view>
						<image :src="info.statusIcon" class="tui-status-img" mode="widthFix" v-if="info.statusIcon"></image>
					</view>
				</view>
				<tui-list-cell class="order-cont" unlined :hover="false">
					<view class="tui-flex-box address">
						<image :src="appInit.image.img_order_address" class="tui-icon-img" v-if="appInit.image"></image>
						<view class="tui-addr">
							<view class="tui-addr-userinfo">{{ info.full_name }}<text class="tui-addr-tel">{{ info.phone }}</text></view>
							<view class="tui-addr-text">{{ info.address_info }}</view>
						</view>
					</view>
					<!-- <view class="tui-address-bg-img"></view> -->
				</tui-list-cell>
				<view class="tui-order-item">
					<tui-list-cell :hover="false" lineLeft="0" padding="26rpx">
						<view class="tui-order-title">
							商品信息
						</view>
					</tui-list-cell>
					<block v-for="(objItem, objIndex) in info.obj_info" :key="objIndex">
						<tui-list-cell padding="0" v-if="objItem.log">
							<view class="tui-goods-item">
								<image v-if="objItem.log" :src="objItem.log.data.picture.url" class="tui-goods-img"></image>
								<view class="tui-goods-center">
									<view class="tui-goods-name" v-if="objItem.log">
										{{ objItem.log.data.title }}
									</view>
								</view>
								<view class="tui-price-right">
									<view class="tui-color-red">
										<text class="tui-size-24 tui-color-red" v-if="info.paySite&&info.paySite.left">{{info.paySite.left}}</text>
										{{ objItem.price }}
										<text class="tui-size-24 tui-color-red" v-if="info.paySite&&info.paySite.right">{{info.paySite.right}}</text>
									</view>
									<view class="tui-color-red">x{{ objItem.num }}</view>
								</view>
							</view>
						</tui-list-cell>
					</block>
					<view class="tui-goods-info">
						<view class="tui-price-flex tui-size-24">
							<view>商品总额</view>
							<view class="flex-b">
								<view class="tui-size-24 tui-color-red" v-if="info.paySite&&info.paySite.left">{{info.paySite.left}}</view>
								<view class="tui-color-red tui-price-large" v-if="info.paySite">{{ info.paySite.sum_price }}</view>
								<view class="tui-size-24 tui-color-red" v-if="info.paySite&&info.paySite.right">{{info.paySite.right}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tui-order-info">
					<!-- <tui-list-cell :hover="false" lineLeft="0" padding="26rpx">
						<view class="tui-order-title">
							订单信息
						</view>
					</tui-list-cell> -->
					<view class="tui-order-content">
						<view class="tui-order-flex">
							<view class="tui-item-title">订单编号:</view>
							<view class="tui-item-content">{{ info.order_sn }}</view>
						</view>
						<block v-if="info.log">
							<view class="tui-order-flex" v-for="(logItem, logIndex) in info.log.log" :key="logIndex">
								<view class="tui-item-title">{{ logItem.title }}:</view>
								<view class="tui-item-content">{{ logItem.data }}</view>
							</view>
						</block>
						<view class="tui-order-flex" v-if="info.status == 2">
							<view class="tui-item-title">{{ info.log.deliverData.delivery_type }}:</view>
							<view class="tui-item-content" @click="clipboard" v-if="info.log.deliverData.delivery_type === '快递配送'">
								{{ info.log.deliverData.delivery_name }}{{ info.log.deliverData.delivery_no }}
							</view>
							<view class="tui-item-content" @click="clipboard" v-if="info.log.deliverData.delivery_type === '线下配送'">
								{{ info.log.deliverData.delivery_name }}{{ info.log.deliverData.delivery_no }}
							</view>
							<view class="tui-item-content" @click="clipboard" v-if="info.log.deliverData.delivery_type === '无需配送'">
								无需配送
							</view>
						</view>
						<view class="tui-order-flex" v-if="false">
							<view class="tui-item-title">配送方式:</view>
							<view class="tui-item-content">包邮</view>
						</view>
						<view class="tui-order-flex">
							<view class="tui-item-title">订单备注:</view>
							<view class="tui-item-content">{{ info.remarks ? info.remarks : '未填写备注... ...' }}</view>
						</view>
					</view>
				</view>


				<view class="tui-order-info" v-if="info.status==1&&tui.inArray(get.tpl,['deliver_goods'])&&tui.inArray(get.actionStatus,[1])">
					<tui-list-cell :hover="false" lineLeft="0" padding="26rpx">
						<view class="tui-order-title">
							订单发货
						</view>
					</tui-list-cell>
					<view class="tui-order-content">
						<tui-form-item label="快递公司" required :labelSize="28" :asterisk="true" left="0" right="0" borderColor="#F1F1F1" :arrow="true" :highlight="true">
							<template v-slot:default>
								<picker @change="bindPickerChange" :value="pageData.picker.index" :range="pageData.picker.array" :range-key="pageData.picker.key">
									<view style="font-size: 28rpx;" v-if="param[get.tpl].express_name">
										{{param[get.tpl].express_name}}
									</view>
									<view style="font-size: 28rpx;color: #CCCCCC;" v-else>
										请选择快递公司
									</view>
								</picker>
							</template>
						</tui-form-item>
						<tui-input label="快递单号" required :lineLeft="false" type="text" :labelSize="28" :size="28" clearable placeholder="请输入快递单号" v-model="param[get.tpl].express_no" confirmType="done"></tui-input>
						<view style="padding:50rpx 90rpx;">
							<tui-button shadow shape="circle" :type="tui.getColorSite().button.type" height="75rpx" width="100%" @click="detail('deliver_goods',info)">提交</tui-button>
						</view>
					</view>
				</view>

				<view class="tui-safearea-bottom"></view>
				<view class="tui-order-btn" v-if="tui.inArray(get.tpl,['def'])||(tui.inArray(get.tpl,['deliver_goods'])&&tui.inArray(get.actionStatus,[0]))">
					<view class="tui-btn-ml" v-if="info.status==0&&tui.inArray(get.tpl,['def'])" @tap.stop="detail('delete',info)">
						<tui-button type="black" plain width="200rpx" height="70rpx" :size="26" shape="circle">取消订单</tui-button>
					</view>
					<view class="tui-btn-ml" v-if="info.status==0&&tui.inArray(get.tpl,['def'])" @tap.stop="detail('nowPay',info)">
						<tui-button type="danger" plain width="200rpx" height="70rpx" :size="26" shape="circle">立即支付</tui-button>
					</view>

					<view class="tui-btn-mr tui-btn-ml" v-if="info.status == 2&&tui.inArray(get.tpl,['def'])" @tap.stop="detail('sign', info)">
						<tui-button type="green" width="200rpx" height="70rpx" :size="26" shape="circle">确认收货</tui-button>
					</view>
					<view class="tui-btn-mr tui-btn-ml" v-if="info.status==1&&tui.inArray(get.tpl,['deliver_goods'])&&tui.inArray(get.actionStatus,[0])" @tap.stop="detail('deliver_goods_show')">
						<tui-button type="danger" width="200rpx" height="70rpx" :size="26" shape="circle">立即发货</tui-button>
					</view>
					<view class="tui-btn-mr tui-btn-ml" v-if="tui.inArray(get.tpl,['def'])">
						<tui-button type="green" plain width="200rpx" height="70rpx" :size="26" shape="circle">联系客服</tui-button>
						<button class="wx_applet_button" open-type="contact" bindcontact="handleContact"></button>
					</view>
				</view>
				<t-pay-way :price="pageData.payWay.price" :paySite="pageData.payWay.paySite" :show="pageData.payWay.status" @btnPay="btnPay" @close="payWayClose"></t-pay-way>
			</view>
		</view>
	</view>
</template>

<script>
	import clipboard from "@/components/common/tui-clipboard/tui-clipboard.js"
	import formCheck from '@/components/common/tui-validation/tui-validation.js'
	import tPayWay from "@/components/views/t-pay-way/t-pay-way"
	export default {
		components: {
			tPayWay,
		},
		data() {
			return {
				get: {},
				appInit: {},
				user: {},
				header: {
					title: '订单详情', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					picker: {
						index: 0,
						array: [],
						key: 'name',
					},
					payWay: {
						status: false,
						price: '0',
						paySite: {},
					},
				},
				param: {
					deliver_goods: {
						id: 0,
						express_name: '',
						express_no: '',
					},
				},
				info: {},
				xhrUrl: '',
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			that.get.tpl = that.get.tpl || 'def';
			switch (that.get.tpl) {
				case 'deliver_goods':
					that.get.actionStatus = that.get.actionStatus || 0;
					break;
				default:
					break;
			}
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
				}
			});
			that.xhrUrl = '/goods';
			that.$forceUpdate();
			that.initialize();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			uni.$once('wxGetUserPhone', function(res) {
				console.log('监听到事件来自 wxGetUserPhone', res);
				that.userInfo = res.user;
				uni.$off('wxGetUserPhone')
			})
			// #endif
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
			that.$forceUpdate();
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.user = that.tui.getCache("user");
					console.log('self:user=>', that.user);
					if (typeof(that.user) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.appInit = that.tui.getCache("appInit");
				console.log('self:appInit=>', that.appInit);
				let response = await that.tui.get(that.xhrUrl, {
					order_id: that.get.id,
					mapKey: that.get.tpl,
					order: that.tui.formatDate().timestamp,
				});
				that.info = response.data;
				switch (that.info.status) {
					case 0:
						that.info.statusText = '等待您付款';
						that.info.statusIcon = that.appInit.image.img_order_payment;
						break;
					case 1:
						that.info.statusText = '付款成功';
						that.info.statusIcon = that.appInit.image.img_order_send;
						break;
					case 2:
						that.info.statusText = '待收货';
						that.info.statusIcon = that.appInit.image.img_order_received;
						break;
					case 3:
						that.info.statusText = '待评价';
						that.info.statusIcon = that.appInit.image.img_order_received;
						break;
					default:
						that.info.statusText = '已完成';
						that.info.statusIcon = that.appInit.image.img_order_signed;
						break;
				}

				switch (that.get.tpl) {
					case 'deliver_goods':
						if (that.tui.isDebug()) {
							that.param[that.get.tpl].id = that.info.id;
							// that.param[that.get.tpl].express_name = '顺丰快递';
							// that.param[that.get.tpl].express_no = 'SF12312312312';
						}
						that.pageData.picker.array = [];
						that.appInit.expressNameList.forEach(function(tabItem, tabKey) {
							that.pageData.picker.array.push({
								name: tabItem,
							});
						});
						break;
					default:
						break;
				}
				that.pageData.loading = true;
				that.$forceUpdate();
			},
			clipboard(event) {
				let that = this;
				let copyData = "";
				copyData = that.info.log.deliverData.delivery_no;
				clipboard.getClipboardData(copyData, (res) => {
					if (res) {
						//复制成功
						that.tui.toast("复制成功！", false, function() {}, 1500);
					} else {
						//复制失败
						that.tui.toast("复制失败！", false, function() {}, 1500);
					}
				}, event)
			},
			async detail(type, item = {}) {
				let that = this;
				switch (type) {
					case 'delete':
						that.tui.confirm('取消订单', '确定取消订单？', function(action) {
							if (action.confirm) {
								that.tui.del(that.xhrUrl, {
									type: 'cancel',
									order_id: item.id
								}, {
									order: that.tui.formatDate().timestamp,
									delete: that.tui.formatDate().timestamp,
								}).then(function(response) {
									that.tui.urlBack(1);
								});
							}
						});
						break;
					case 'sign':
						let signParam = {};
						signParam.order_id = item.id;
						let signResponse = await that.tui.put(that.xhrUrl, signParam, {
							order: that.tui.formatDate().timestamp,
							sign: that.tui.formatDate().timestamp
						});
						that.tui.toast(signResponse.info, false, function() {
							switch (signResponse.status) {
								case 0:
									that.__init();
									break;
								default:
									// that.tui.toast(signResponse.info, 'none', function() {}, 1500);
									break;
							}
						}, 1500);
						break;
					case 'nowPay':
						that.pageData.payWay.price = item.total_price;
						let index = 0;
						for (let item in that.appInit.paySite) {
							that.appInit.paySite[item].info = '';
							switch (that.appInit.paySite[item].key) {
								case "balance":
									if (that.user.userInfo.balance * 100 < that.pageData.payWay.price * 100) {
										that.appInit.paySite[item].info = '余额不足请充值';
									}
									break;
								case "u_pay":
									if (that.user.userInfo.u_species * 100 < that.pageData.payWay.price / that.tui.str2arr(that.appInit.integral2u_species, ':')[1]) {
										that.appInit.paySite[item].info = 'U币不足';
									} else {
										that.appInit.paySite[item].info = 'U币支付' + that.pageData.payWay.price / that.tui.str2arr(that.appInit.integral2u_species, ':')[1];
									}
									break;
							}
							if (that.tui.inArray(index, [0])) {
								that.appInit.paySite[item].status = true;
							} else {
								that.appInit.paySite[item].status = false;
							}
							index++;
						}
						that.pageData.payWay.paySite = that.appInit.paySite;
						that.pageData.payWay.order_id = item.id;
						that.pageData.payWay.status = true;
						return;
						let payParam = {};
						payParam.id = item.id;
						payParam.pay_fun = 2;
						payParam.ambient = 2;
						// // #ifdef H5
						// payParam.pay_fun = 1;
						// payParam.ambient = 2;
						// // #endif
						let payResponse = await that.tui.post(that.xhrUrl, payParam, {
							pay: that.tui.formatDate().timestamp
						});
						switch (payResponse.status) {
							case 0:
								// #ifdef MP-WEIXIN
								that.tui.wxPay(payResponse.data.paySite, function(res) {
									that.tui.toast('支付成功！', 'none', function() {
										that.__init();
									}, 1000)
								}, function(err) {
									//跳转到我的订单页
									that.tui.toast('取消支付！', 'none', function() {}, 1500);
								});
								// #endif
								// #ifndef MP-WEIXIN
								console.log(payResponse);
								// #endif
								break;
							default:
								that.tui.toast(payResponse.info, 'none', function() {
									// that.actionsheetClose();
								}, 1500);
								break;
						}
						break;
					case 'deliver_goods':
						//进行表单检查
						let deliverCheckRes = formCheck.validation(that.param[that.get.tpl], [
							//
							{
								name: "express_name",
								rule: ["required", ],
								msg: ["请选择快递公司", ]
							},
							{
								name: "express_no",
								rule: ["required", ],
								msg: ["请输入快递单号", ]
							},
						]);
						if (deliverCheckRes) {
							that.tui.toast(deliverCheckRes + "！", false, function() {}, 1500);
							return;
						}
						let deliverResponse = await that.tui.post(that.xhrUrl, that.param[that.get.tpl], {
							deliver: that.tui.formatDate().timestamp
						});
						that.tui.toast(deliverResponse.info, false, function() {
							switch (deliverResponse.status) {
								case 0:
									that.__init();
									break;
								default:
									break;
							}
						}, 1500);
						break;
					case 'deliver_goods_show':
						that.get.actionStatus = 1;
						break;
					default:
						console.log(that.get.tpl, type, item);
						break;
				}
				that.$forceUpdate();
			},
			payWayClose() {
				let that = this;
				that.pageData.payWay.status = false;
			},
			async btnPay(e) {
				let that = this;
				let payParam = {};
				payParam.pay_fun = e.payKey;
				payParam.ambient = 0;
				payParam.order_id = that.pageData.payWay.order_id;
				switch (e.payKey) {
					case 2:
					case 3:
						console.log(that.param);
						return;
						break;
				}
				let response = await that.tui.put(that.xhrUrl, payParam, {
					order: that.tui.formatDate().timestamp,
					pay: that.tui.formatDate().timestamp,
				}, true, true, false);
				that.tui.toast(response.info, false, function() {
					switch (response.status) {
						case 0:
							switch (e.payKey) {
								case 2:
								case 3:
									console.log(that.param);
									break;
								default:
									that.tui.setUserInfo(response.data.userInfo, function(response) {});
									break;
							}
							break;
						default:
							break;
					}
				}, 1500);
			},
			async bindPickerChange(e) {
				let that = this;
				switch (that.get.tpl) {
					case 'deliver_goods':
						that.param[that.get.tpl].express_name = that.pageData.picker.array[e.detail.value].name;
						break;
					default:
						break;
				}
				that.$forceUpdate();
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
			// that.pageData.loading = false;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.order-cont{
		background-color:  transparent !important;
		margin-top: -30px !important;
		padding: 13px 14px !important;
	}
	.address{
		position: relative;
		top: 0;
		left: 0;
		width: 690rpx;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.orderInfo {
		.tui-order-header {
			position: absolute;
			width: 100%;
			height: 170rpx;
			position: relative;
			background-color: #71D8C3;
			border-radius: 0 0 50rpx 50rpx;
			background: linear-gradient(to right, #71D8C3, #3BC2A4 );
			.tui-img-bg {
				width: 100%;
				height: 160rpx;
			}

			.tui-header-content {
				width: 100%;
				height: 160rpx;
				position: absolute;
				z-index: 10;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 70rpx;
				box-sizing: border-box;

				.tui-status-text {
					font-size: 34rpx;
					line-height: 34rpx;
					color: #FEFEFE;
				}
				.statustext{
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}

				.tui-reason {
					font-size: 24rpx;
					line-height: 24rpx;
					color: rgba(254, 254, 254, 0.75);
					padding-top: 15rpx;
					display: flex;
					align-items: center;

					.tui-reason-text {
						padding-right: 12rpx;
					}
				}

				.tui-status-img {
					width: 80rpx;
					height: 80rpx;
					display: block;
				}
			}
		}

		.tui-logistics {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 24rpx 0 20rpx;
			box-sizing: border-box;

			.tui-logistics-text {
				font-size: 26rpx;
				line-height: 32rpx;
			}

			.tui-logistics-time {
				font-size: 24rpx;
				line-height: 24rpx;
				padding-top: 16rpx;
				color: #666
			}
		}

		.tui-addr {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 20rpx;
			box-sizing: border-box;

			.tui-addr-userinfo {
				font-size: 30rpx;
				line-height: 30rpx;
				font-weight: bold;

				.tui-addr-tel {
					padding-left: 40rpx;
				}
			}

			.tui-addr-text {
				font-size: 24rpx;
				line-height: 32rpx;
				padding-top: 16rpx;
			}

		}

		.tui-order-title {
			width: 100%;
			font-size: 28rpx;
			line-height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tui-order-item {
			margin-top: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.tui-goods-item {
				width: 100%;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.tui-goods-img {
					width: 180rpx;
					height: 180rpx;
					display: block;
					flex-shrink: 0;
				}

				.tui-goods-center {
					flex: 1;
					padding: 20rpx 8rpx;
					box-sizing: border-box;

					.tui-goods-name {
						max-width: 310rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 26rpx;
						line-height: 32rpx;
					}

					.tui-goods-attr {
						font-size: 22rpx;
						color: #888888;
						line-height: 32rpx;
						padding-top: 20rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
				}

				.tui-price-right {
					text-align: right;
					font-size: 24rpx;
					color: #888888;
					line-height: 30rpx;
					padding-top: 20rpx;
				}
			}


			.tui-goods-info {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background: #fff;

				.tui-price-flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.tui-order-info {
			margin-top: 20rpx;

			.tui-order-content {
				width: 100%;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				background: #fff;
				font-size: 24rpx;
				line-height: 30rpx;

				.tui-order-flex {
					display: flex;
					padding-top: 18rpx;
					justify-content: space-between;
					font-size: 30rpx;
					color: #333333;
					margin: 35rpx 0;
					&:first-child {
						padding-top: 0
					}

					.tui-item-title {
						width: 132rpx;
						flex-shrink: 0;
						
						
					}

					.tui-item-content {
						color: #666;
						line-height: 32rpx;
					}
				}
			}
		}

		.tui-contact {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			position: relative;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}
		}

		.tui-order-btn {
			width: 100%;
			height: 98rpx;
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 26rpx;
			box-shadow: 0 0 1px rgba(0, 0, 0, .3);
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 996;

			.tui-btn-ml {
				display: flex;
				align-items: center;
				justify-content: center;
				// width: 200rpx;
				// height: 70rpx;
				// background: #36B184;
				// border-radius: 35rpx 35rpx 35rpx 35rpx;
				margin-left: 30rpx;
				position: relative;
			}

			.tui-btn-mr {
				margin-right: 30rpx;
				position: relative;
			}
		}

	}
	
</style>